<template>
  <div class="outer">
    <h1>Header组件</h1>
    <p>父组件给我的count是 :{{ count }}</p>
    <button @click="changeProps">尝试修改props count的值</button>
    <button @click="changePerson">尝试修改person的值</button>
  </div>
</template>

<script>
export default {
  name: "Header",
  //props的写法1 直接用数组接收
  // props: ["a", "count", "person"],
  //
  //props的写法2 对象形式,可以限制props值的类型
  // props: {
  //   a: String,
  //   count: Number,
  //   person: Object,
  // },
  //

  //props的写法3 对象形式 可以限制props值的类型 必填等属性
  props: {
    a: {
      type: String,
      required: true,
    },
    count: {
      type: Number,
      default: 100,
    },
    person: {
      type: Object,
    },
  },

  mounted() {
    console.log(this, "Header实例");
  },
  methods: {
    changeProps() {
      //不能修改props的值
      // this.count++;
    },
    changePerson() {
      //如果props传递的是一个对象,修改props虽然效果可以实现,但是也不能修改
      // this.person.age++;
    },
  },
};
</script>

<style scoped>
.outer {
  background: red;
}
</style>
